<template>
  <div class="div">
    <a-modal
      title="选择产品"
      :width="modalWidth"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleCancel"
      @cancel="handleCancel"
    >
      <a-spin tip="Loading..." :spinning="false">
        <a-table :columns="columns" :data-source="data">
          <span slot="action" slot-scope="text, record">
            <a @click="add(record)">选择</a>
          </span>
        </a-table>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { internetProductList } from '@/api/api'
export default {
  name: 'JSelectDepartModal',
  props: ['modalWidth', 'multi', 'rootOpened', 'departId'],
  data() {
    return {
      visible: false,
      confirmLoading: false,
      // treeData: [],
      // autoExpandParent: true,
      // expandedKeys: [],
      // dataList: [],
      // checkedKeys: [],
      // checkedRows: [],
      // searchValue: '',
      data: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '名称',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '协议类型',
          align: 'center',
          dataIndex: 'protocolType_dictText',
        },
        {
          title: '数据格式',
          align: 'center',
          dataIndex: 'dataFormat_dictText',
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'releaseStatus_dictText',
        },
        {
          title: '设备类型',
          align: 'center',
          dataIndex: 'deviceType',
        },
        {
          title: '所属行业',
          align: 'center',
          dataIndex: 'industry',
        },
        {
          title: '产品状态',
          align: 'center',
          dataIndex: 'status_dictText',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  created() {
    this.loadDepart()
  },
  watch: {
    // departId() {
    //   this.initDepartComponent()
    // },
    // visible: {
    //   handler() {
    //     if (this.departId) {
    //       this.checkedKeys = this.departId.split(',')
    //       // console.log('this.departId', this.departId)
    //     } else {
    //       this.checkedKeys = []
    //     }
    //   },
    // },
  },
  methods: {
    show() {
      this.visible = true
      // this.checkedRows = []
      // this.checkedKeys = []
    },
    loadDepart() {
      internetProductList().then((res) => {
        
        if (res.success) {
          this.data = res.result.records
          // let arr = [...res.result]
          // this.reWriterWithSlot(arr)
          // this.treeData = arr
          // this.initDepartComponent()
          // if (this.rootOpened) {
          //   this.initExpandedKeys(res.result)
          // }
        }
      })
    },
    // initDepartComponent() {
    //   let names = ''
    //   if (this.departId) {
    //     let currDepartId = this.departId
    //     for (let item of this.dataList) {
    //       if (currDepartId.indexOf(item.key) >= 0) {
    //         names += ',' + item.title
    //       }
    //     }
    //     if (names) {
    //       names = names.substring(1)
    //     }
    //   }
    //   this.$emit('initComp', names)
    // },
    // reWriterWithSlot(arr) {
    //   for (let item of arr) {
    //     if (item.children && item.children.length > 0) {
    //       this.reWriterWithSlot(item.children)
    //       let temp = Object.assign({}, item)
    //       temp.children = {}
    //       this.dataList.push(temp)
    //     } else {
    //       this.dataList.push(item)
    //       item.scopedSlots = { title: 'title' }
    //     }
    //   }
    // },
    // initExpandedKeys(arr) {
    //   if (arr && arr.length > 0) {
    //     let keys = []
    //     for (let item of arr) {
    //       if (item.children && item.children.length > 0) {
    //         keys.push(item.id)
    //       }
    //     }
    //     this.expandedKeys = [...keys]
    //   } else {
    //     this.expandedKeys = []
    //   }
    // },
    // onCheck(checkedKeys, info) {
    //   if (!this.multi) {
    //     let arr = checkedKeys.checked.filter((item) => this.checkedKeys.indexOf(item) < 0)
    //     this.checkedKeys = [...arr]
    //     this.checkedRows = this.checkedKeys.length === 0 ? [] : [info.node.dataRef]
    //   } else {
    //     this.checkedKeys = checkedKeys.checked
    //     this.checkedRows = this.getCheckedRows(this.checkedKeys)
    //   }
    // },
    // onSelect(selectedKeys, info) {
    //   let keys = []
    //   keys.push(selectedKeys[0])
    //   if (!this.checkedKeys || this.checkedKeys.length === 0 || !this.multi) {
    //     this.checkedKeys = [...keys]
    //     this.checkedRows = [info.node.dataRef]
    //   } else {
    //     let currKey = info.node.dataRef.key
    //     if (this.checkedKeys.indexOf(currKey) >= 0) {
    //       this.checkedKeys = this.checkedKeys.filter((item) => item !== currKey)
    //     } else {
    //       this.checkedKeys.push(...keys)
    //     }
    //   }
    //   this.checkedRows = this.getCheckedRows(this.checkedKeys)
    // },
    // onExpand(expandedKeys) {
    //   this.expandedKeys = expandedKeys
    //   this.autoExpandParent = false
    // },
    // handleSubmit() {
    //   if (!this.checkedKeys || this.checkedKeys.length == 0) {
    //     this.$emit('ok', '')
    //   } else {
    //     this.$emit('ok', this.checkedRows, this.checkedKeys.join(','))
    //   }
    //   this.handleClear()
    // },
    handleCancel() {
      this.visible = false
    },
    
    // getParentKey(currKey, treeData) {
    //   let parentKey
    //   for (let i = 0; i < treeData.length; i++) {
    //     const node = treeData[i]
    //     if (node.children) {
    //       if (node.children.some((item) => item.key === currKey)) {
    //         parentKey = node.key
    //       } else if (this.getParentKey(currKey, node.children)) {
    //         parentKey = this.getParentKey(currKey, node.children)
    //       }
    //     }
    //   }
    //   return parentKey
    // },
    // // 根据 checkedKeys 获取 rows
    // getCheckedRows(checkedKeys) {
    //   const forChildren = (list, key) => {
    //     for (let item of list) {
    //       if (item.id === key) {
    //         return item
    //       }
    //       if (item.children instanceof Array) {
    //         let value = forChildren(item.children, key)
    //         if (value != null) {
    //           return value
    //         }
    //       }
    //     }
    //     return null
    //   }

    //   let rows = []
    //   for (let key of checkedKeys) {
    //     let row = forChildren(this.treeData, key)
    //     if (row != null) {
    //       rows.push(row)
    //     }
    //   }
    //   return rows
    // },
    // 选择产品
    add(val){
      console.log(val.id)
       this.$emit('ok', val.id)
      this.visible = false
    }
  },
}
</script>

<style scoped>
.ant-modal-wrap >>> .ant-modal {
  width: 1200px !important;
}
</style>